﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <link href="../../resources/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

    <script src="../../resources/lib/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/jquery/jquery.form.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <script type="text/javascript">
        var tree = null;
        var addNew = false;
        var myaccount = '../../resources/lib/ligerUI/skins/icons/myaccount.gif';
        var memeber = '../../resources/lib/ligerUI/skins/icons/memeber.gif';
        var archives = '../../resources/lib/ligerUI/skins/icons/archives.gif';
        $(function () {
            tree = $("#tree2").ligerTree({
                checkbox: false,
                data: [
                    { text: 'A区域', id:"1", type:"fa"},
                    { text: 'B区域', id:"2", type:'fa'},
                    { text: 'C区域', id:"3", type:'fa'},

                    { text: 'A1区域', id:"1.1", pid:"1", icon: myaccount, type:'sa'},
                    { text: 'A2区域', id:"1.2", pid:"1", icon: myaccount, type:'sa'},

                    { text: 'A11区域', id:"1.1.1", pid:"1.1", icon: archives, type:'ta' },
                    { text: 'A12区域', id:"1.1.2", pid:"1.1", icon: archives, type:'ta' }
                ],
                idFieldName :'id',
                parentIDFieldName :'pid',
                onSelect: function(node, target) {
                    addNew = false;
                    var type = node.data.type;
                    if (type == 'fa') {
                       /* $("#dcForm").hide();
                        $("#doorForm").hide();*/
                        $("#aForm").show();

                        $("#aForm input[name=name]").val(node.data.text);
                        $("#aForm input[name=id]").val(node.data.id);

                        $("#addSAreaBtn").show();
                       // $("#addTAreaBtn").hide();
                    } else if (type == 'sa') {
                        /*$("#mcForm").hide();
                        $("#doorForm").hide();*/
                        $("#aForm").show();

                        $("#aForm input[name='name']").val(node.data.text);
                        $("#aForm input[name=id]").val(node.data.id);
                        $("#aForm input[name=pid]").val(null);// 删除pid属性

                       // $("#addFAreaBtn").show();
                       // $("#addDCItemBtn").hide();
                        $("#addSAreaBtn").show();
                        //$("#addTAreaBtn").show();
                    } else if (type == 'ta') {
                       /* $("#mcForm").hide();
                        $("#dcForm").hide();*/
                        $("#aForm").show();

                        $("#aForm input[name='name']").val(node.data.text);
                        $("#aForm input[name=id]").val(node.data.id);
                        $("#aForm input[name=pid]").val(null);// 删除pid属性

                        $("#addSAreaBtn").show();
                        //$("#addTAreaBtn").hide();
                    }
                }
            });
            $("form").ligerForm();
            $('#aForm').ajaxForm(function() {
                alert("area form ajax submit end!");
            });
          /*  $('#dcForm').ajaxForm(function() {
                alert("dc form ajax submit end!");
            });
            $('#doorForm').ajaxForm(function() {
                alert("door form ajax submit end!");
            });*/

        });
        function reload() {
            tree.clear();
            var data = [
                { text: 'A区域', id:"1", type:"fa"},
                { text: 'B区域', id:"2", type:'fa'},
                { text: 'C区域', id:"3", type:'fa'},

                { text: 'A1区域', id:"1.1", pid:"1", icon: myaccount, type:'sa'},
                { text: 'A2区域', id:"1.2", pid:"1", icon: myaccount, type:'sa'},

                { text: 'A11区域', id:"1.1.1", pid:"1.1", icon: archives, type:'ta' },
                { text: 'A12区域', id:"1.1.2", pid:"1.1", icon: archives, type:'ta' }
            ];
            tree.setData(data);
            //tree.loadData(null, 'tree.json');
        }

        function addFAreaItem() {
            /*$("#dcForm").hide();
            $("#doorForm").hide();*/
            $("#aForm input[type=reset]").click();
            $("#aForm input[name='name']").val("新建主区域");
            //var node = tree.getSelected();
            $("#aForm input[name=id]").val(null);// 删除id属性
            $("#aForm").show();
            addNew = true;
        }
        function addSAreaItem() {
           /* $("#mcForm").hide();
            $("#doorForm").hide();*/
            $("#aForm input[type=reset]").click();
            $("#aForm input[name='name']").val("下级子区域");
            var node = tree.getSelected();
            $("#aForm input[name=id]").val(null);// 删除id属性
            $("#aForm input[name=pid]").val(node.data.id);// 设置pid属性
            $("#aForm").show();
        }
       /* function addTAreaItem() {
           *//* $("#mcForm").hide();
            $("#dcForm").hide();*//*
            $("#aForm input[type=reset]").click();
            $("#aForm input[name='name']").val("新建二级子区域");
            var node = tree.getSelected();
            $("#aForm input[name=id]").val(null);// 删除id属性
            $("#aForm input[name=pid]").val(node.data.id);// 设置pid属性
            $("#aForm").show();
        }*/
        function updateItem() {

        }
        function removeItem() {

        }
    </script>
    <style type="text/css">
        .l-table-edit {}
        .l-table-edit-td{ padding:4px;}
        .l-button-submit,.l-button-reset{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
    </style>
</head>
<body id="layout1" style="width:100%; margin:0 auto;">
<div style="position:absolute; left: 5px; top: 5px; right: 5px; height: 25px; ">
    <a class="l-button" onclick="reload()" style="float:left;margin-right:10px;">重新加载</a>

    <a class="l-button" onclick="addFAreaItem()" style="float:left;margin-right:10px; width: 80px;">添加主区域</a>
    <a class="l-button l-hidden" id="addSAreaBtn" onclick="addSAreaItem()" style="float:left;margin-right:10px; width: 80px;">添加下级子区域</a>
    <!--<a class="l-button l-hidden" id="addTAreaBtn" onclick="addTAreaItem()" style="float:left;margin-right:10px;">添加二级子区域</a>-->
    <a class="l-button" onclick="updateItem()" style="float:left;margin-right:10px;">更新</a>
    <a class="l-button" onclick="removeItem()" style="float:left;margin-right:10px;">删除</a>
    <br style="clear: both;" />
</div>

<div style="position:absolute; left: 5px; top: 35px; bottom: 5px; width: 190px; border:1px solid #ccc; overflow:auto;  ">
    <ul id="tree2">
    </ul>
</div>

<div style="position:absolute; left: 202px; right: 5px; top: 35px; bottom: 5px; border:1px solid #ccc; overflow:auto; padding: 5px;">
    <div id="dialog_target"  style="margin:5px;">
        <!--门表单设置-->
        <form class="l-hidden" name="aForm" method="post" action="" id="aForm">
            <div>
            </div>
            <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                <tr>
                    <td align="right" class="l-table-edit-td">名称:</td>
                    <td align="left" class="l-table-edit-td">
                        <input name="name" type="text" ltype="text" />
                    </td>
                    <td align="left"></td>
                </tr>
                <tr>
                    <td align="right" class="l-table-edit-td">组名:</td>
                    <td align="left" class="l-table-edit-td">
                        <input name="group" type="text" ltype="text" />
                    </td>
                    <td align="left"></td>
                </tr>
                <tr>
                    <td align="right" class="l-table-edit-td">编号:</td>
                    <td align="left" class="l-table-edit-td">
                        <input name="code" type="text" ltype="text" />
                    </td>
                    <td align="left"></td>
                </tr>

                <tr>
                    <td align="right" class="l-table-edit-td">编辑日期:</td>
                    <td align="left" class="l-table-edit-td">
                        <input name="txtDate" type="text" ltype="date" />
                    </td><td align="left"></td>
                </tr>
            </table>
            <br />
            <input type="hidden" name="id" />
            <input type="hidden" name="pid" />
            <input type="submit" value="提交" class="l-button l-button-submit" />
            <input type="reset" value="重置" class="l-button l-button-reset"/>
            <br class="l-clear" />
        </form>
    </div>
</div>

</body>
</html>
